<template>
  <view class="login-wrapper">
    <view class="header-box">
      <view class="logo-title">有事没事问七爷</view>

      <view class="desc">欢迎使用开心测</view>
      <!-- <view class="desc">登录后，可获得问答权限及优惠券套餐等服务</view> -->
      <input type="number" v-model="mobile" class="mobile" placeholder="请输入手机号"></input>

      <button v-if="!checked" class="button phone phone-disable">请先勾选协议</button>
      <button
          v-if="checked"
          class="button phone"
          @click="toLogin"
      >手机号登录
      </button>
      <!--      <button-->
      <!--        v-if="checked"-->
      <!--        class="button phone"-->
      <!--        open-type="getPhoneNumber"-->
      <!--        @getphonenumber="onGetphonenumber"-->
      <!--      >手机号登录</button>-->

      <view class="agree-box">
        <tui-radio
            :checked="checked"
            bordercolor="#999"
            color="#07c160"
            scaleRatio="0.6"
            @change="handerClick"
        ></tui-radio>
        <view class="agree-desc" @click="handerClick">
          我已阅读并同意
          <text
              class="agree-text"
              style="margin-left:6px"
              @click.stop="handerClickInfo('02')"
          >《隐私政策》
          </text>
          和
          <text class="agree-text" @click.stop="handerClickInfo('03')">《使用协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {loginGetPhoneNumberApi, loginWechatApi} from "@/apis/user";
import {commonStorage} from "@/utils/common.js";

export default {
  data() {
    return {
      checked: false,
      mobile: '',
    };
  },
  methods: {
    toLogin() {
      if (!this.mobile){
        uni.showToast({
          title:'请输入手机号',
          icon:'none'
        })
        return
      }
      this.login(this.mobile)
    },
    async login(mobile) {
      let {code, data} = await loginWechatApi({
        mobile: mobile
      });
      if (code == 1) {
        commonStorage.setStorage("token", data.token);
        commonStorage.setStorage("mobile", mobile);
        commonStorage.setStorage("userInfo", JSON.stringify(data.userVO));
        uni.switchTab({
          url: "/pages/today/today"
        });
      }
    },
    async onGetphonenumber(e) {
      console.log(e)
      const rescode = e.detail.code;
      let {code, data} = await loginGetPhoneNumberApi({code: rescode});
      if (code == 1) {
        this.login(data);
      }
    },
    handerClick() {
      this.checked = !this.checked;
    },
    handerClickInfo(flag) {
      uni.navigateTo({
        url: "/pqgeInfo/protocols/protocols?type=" + flag
      });
    }
  }
};
</script>

<style lang="scss" scoped>

.mobile {
  width: 100%;
  height: 60rpx;
  padding: 0 10rpx;
  display: block;
  margin: 20rpx auto;
  border: 1px solid #EEEDEE;
  border-radius: 20rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}
.login-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  .header-box {
    padding-top: 180rpx;

    .logo-title {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
    }

    .desc {
      color: #888;
      text-align: center;
    }
  }

  .logo-img {
    width: 240rpx;
    height: 240rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;
    margin: 18px 0;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #1aad19;

    &.phone-disable {
      background: #eee;
    }
  }

  .agree-box {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;

    .agree-desc {
      margin-left: 8px;

      .agree-text {
        color: #409eff;
      }
    }
  }
}
</style>
